// pages/view/index.js
const app = getApp()
var ctx = wx.createCanvasContext('myCanvas')
Page({
  data: {
    beijingurl: '../../img/map.jpg',
    scale: 1,
    hcale: 1,
    x_list: '',
    sortline: '',
    httpimg: 'http://demo.yoois.com/addons/maixun_wuxilvyou/icon/bg.jpg',
    tempImgPath: '',
    spotlist: null,
    // 景点弹窗内容
    viewText: '',
    viewInfo: '',
    // 景点激活
    actView: 0,
    actHotel: 0,
    imgpath: '',
    // 路线弹窗
    viewShow: false,
    bot: '',
    isShow: false
  },
  onLoad: function (options) {
    var page = this
    var spotlist
    var linelist
    page.setData({
      imgpath: app.data.imgpath
    })
    //指定图片的URL
    wx.getSystemInfo({
      success: function (res) {
        console.log(res.screenHeight)
        console.log(res.screenHeight / 1350)
        page.setData({
          scale: res.screenWidth / 750,
          hcale: res.screenHeight / 1350
        })
      }
    })
    app.util.request({
      url: 'entry/wxapp/Spot',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      method: 'POST',
      data: {},
      success: function (res) {
        wx.hideLoading()
        console.log(res.data)
        if (res.data.code == 200) {
          spotlist = res.data.data
          page.setData({
            spotlist: spotlist
          })
          app.util.request({
            url: 'entry/wxapp/Myline',
            header: {
              'content-type': 'application/x-www-form-urlencoded'
            },
            method: 'POST',
            data: {
              openid: app.openid
            },
            success: function (res) {
              wx.hideLoading()
              console.log(res.data)
              var x_list = Array()
              if (res.data.code == 200) {
                linelist = res.data.data
                for (var i = 0; i < linelist.length; i++) {
                  for (var a = 0; a < spotlist.length; a++) {
                    if (linelist[i].spotid == spotlist[a].id) {
                      spotlist[a]['cid'] = linelist[i].id
                      x_list.push(spotlist[a])
                    }
                  }
                }
                page.setData({
                  linelist: linelist,
                  spotlist: spotlist,
                  x_list: x_list,
                  bot: true
                })
                page.lookline()
              } else {
                //显示下半部分
                page.setData({
                  bot: false
                })
              }
            },
            fail: function () {
              wx.hideLoading()
            }
          })
        } else {
          page.setData({
            bot: true
          })
        }
      },
      fail: function () {
        wx.hideLoading()
      }
    })
  },

  goRoad: function () {
    wx.navigateTo({
      url: '../view/view'
    })
  },

  //查看线路
  //线路返回
  linereturn: function () {
    this.setData({
      lineshow1: '',
      lineshow: 'lineshow'
    })
  },

  //景点 详情
  goinfo: function (e) {
    var page = this
    console.log(e.currentTarget.dataset.data)
    wx.navigateTo({
      url: '../view-detail/view-detail?id=' + e.currentTarget.dataset.data.id
    })
  },
  // 控制景点弹窗
  viewShow: function (e) {
    console.log(e.currentTarget.dataset)
    var info = e.currentTarget.dataset.info
    console.log(info)
    this.setData({
      viewShow: true,
      viewText: e.currentTarget.dataset.name,
      viewInfo: info
    })
  },
  viewClose: function (e) {
    this.setData({
      viewShow: false
    })
  },
  //打卡
  clock: function (e) {
    var page = this
    console.log(e.currentTarget.dataset.info)
    wx.navigateTo({
      url: '../clock-detail/clock-detail?id=' + e.currentTarget.dataset.info.cid
    })
  },
  //详情
  detail: function (e) {
    console.log('e')
  },
  //导航
  navigation: function (e) {
    console.log(e.target.dataset.info)
    //console.log(parseFloat(e.target.dataset.info.latitude));
    var info = e.target.dataset.info
    wx.getLocation({
      //获取当前经纬度
      type: 'wgs84', //返回可以用于wx.openLocation的经纬度，官方提示bug: iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息
      success: function (res) {
        wx.openLocation({
          //​使用微信内置地图查看位置。
          latitude: parseFloat(info.latitude), //要去的纬度-地址
          longitude: parseFloat(info.longitude), //要去的经度-地址
          name: info.scenic_spot_name,
          address: info.jianjie
        })
      }
    })
  },
  scroll: function (e) {
    // console.log(e)
  },

  //查看线路
  lookline: function (e) {
    var page = this
    var linedata = page.data.x_list
    wx.getImageInfo({
      src: page.data.httpimg, //请求的网络图片路径
      success: function (res) {
        var bg_img = res.path
        ctx.clearRect(0, 0, 1000 * page.data.scale, 1677 * page.data.scale)
        ctx.drawImage(bg_img, 0, 0, 1000 * page.data.scale, 1677 * page.data.scale);
        ctx.lineWidth = 4
        ctx.setStrokeStyle('#feef78')
        ctx.setGlobalAlpha(0.9)
        ctx.moveTo(linedata[0].x * page.data.scale, linedata[0].y * page.data.scale)
        //for (var i = 1; i < linedata.length; i++) {
        //ctx.lineTo((linedata[i].x) * page.data.hcale , (linedata[i].y) * page.data.scale);
        //}
        var lastpoint
        for (var i = 0; i < linedata.length; i++) {
          if (i > 0) {
            var m = {
              x: linedata[i].x * page.data.hcale,
              y: (linedata[i].y * page.data.scale - lastpoint.y) / 2 + lastpoint.y
            }
            ctx.bezierCurveTo(
              lastpoint.x,
              lastpoint.y,
              m.x,
              m.y,
              linedata[i].x * page.data.hcale,
              linedata[i].y * page.data.scale
            )
          }
          lastpoint = {
            x: linedata[i].x * page.data.hcale,
            y: linedata[i].y * page.data.scale
          }
        }
        ctx.stroke()
        ctx.draw(false, function () {
          Okgenerate(page)
        })
      }
    })
  }
})
//生成图片
function Okgenerate(page) {
  //生成图片方法
  wx.canvasToTempFilePath({
    //生成图片
    x: 0,
    y: 0,
    quality: 1,
    fileType: 'jpg',
    canvasId: 'myCanvas',
    success: function (res) {
      console.log(res.tempFilePath)
      page.setData({
        beijingurl: res.tempFilePath,
        isShow: true
      })
    }
  })
}
